<template>
	<div class="table-component-container">
		<el-table :data="tableData" style="width: 100%" :header-cell-style="{ background: '#F8F8F9' }" empty-text="暂无数据" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="40" align="center" style="padding: 0"> </el-table-column>
			<el-table-column type="icon" width="26" align="center">
				<span class="icon"></span>
			</el-table-column>
			<el-table-column prop="fileName" label="名称" width="auto"> </el-table-column>
			<el-table-column prop="sendAt" label="发送时间" width="180"> </el-table-column>
			<el-table-column prop="type" label="类型" width="140"> </el-table-column>
			<el-table-column prop="size" label="大小" width="140"> </el-table-column>
		</el-table>
	</div>
</template>

<script>
export default {
	props: {
		tableData: {
			type: Array,
			required: true,
			default: () => []
		}
	},
	data() {
		return {};
	},
	methods: {
		handleSelectionChange(val) {
			this.$emit('handleSelectionChange', val);
		}
	}
};
</script>

<style lang="less">
.table-component-container {
	.has-gutter {
		.el-table-column--selection {
			.cell {
				display: none;
			}
		}
	}
	.el-table td.el-table__cell div {
		line-height: 100%;
	}
}
</style>

<style lang="less" scoped>
.table-component-container {
	.icon {
		width: 16px;
		height: 16px;
		background: url('@/assets/img/icon/file_icon.png');
		background-repeat: no-repeat;
		background-size: 100%;
		display: block;
		text-align: center;
	}
	/deep/ .el-table-column--selection {
		.cell {
			padding: 0;
		}
	}
}
</style>
